<template>
  <div class="users">
    <h2 style="margin-bottom: 20px;">订单管理</h2>

      
<!-- <el-row :gutter="20" style="margin-bottom: 20px;">
  <el-col :span="8"> 
    <el-input clearable  placeholder="请输入内容" class="input-with-select" ></el-input>
  </el-col>
  <el-button   >查询</el-button>
  <el-button type="primary" @click="add_user()">新增</el-button>
</el-row> -->


<el-table :data="list"  stripe>
  <el-table-column prop="id" label="ID"></el-table-column>
  <el-table-column prop="nickname" label="用户昵称" >
    <template #default="scope">
        <el-tooltip
          class="item"
          effect="dark"
          :content="scope.row.nickname"
          placement="top">
          <div class="nickname-cell">
            {{ scope.row.nickname }}
          </div>
        </el-tooltip>
      </template>
  </el-table-column>
  <el-table-column prop="price" label="商品金额" ></el-table-column>   
  <el-table-column prop="description" label="商品描述" >
    <template #default="scope">
        <el-tooltip
          class="item"
          effect="dark"
          :content="scope.row.description"
          placement="top">
          <div class="nickname-cell">
            {{ scope.row.description }}
          </div>
        </el-tooltip>
      </template>
  </el-table-column>  
  <el-table-column prop="url" label="商品图片" >
    <template #default="scope">
        
          <div class="nickname-cell">
            <img :src="scope.row.url" alt="" style="width: 50px; height: 50px;">
          </div>
    
      </template>
  </el-table-column>
  <el-table-column prop="state" label="状态" >
    <!-- 商品状态：0 - 下架，1 - 上架 -->
    <template #default="scope">
      <el-tag v-if="scope.row.state == 0" type="danger">已下架</el-tag>
      <el-tag v-else-if="scope.row.state == 1" type="success">已上架</el-tag>
    </template>
  </el-table-column>
  <el-table-column prop="created_at" label="创建时间" >
    <template #default="scope">
        <el-tooltip
          class="item"
          effect="dark"
          :content="scope.row.created_at"
          placement="top">
          <div class="nickname-cell">
            {{ scope.row.created_at }}
          </div>
        </el-tooltip>
      </template>
  </el-table-column>    
   
  <el-table-column prop="shipping_method" label="配送方式" >
    <!-- 物流方式：0 - 包邮，1 - 卖家承担运费，2 - 买家承担运费 -->
    <template #default="scope">
      <el-tag v-if="scope.row.shipping_method == 0" type="success">包邮</el-tag>
      <el-tag v-else-if="scope.row.shipping_method == 1" type="danger">卖家承担运费</el-tag>
      <el-tag v-else-if="scope.row.shipping_method == 2" type="danger">买家承担运费</el-tag>
    </template>
  </el-table-column>
  <el-table-column prop="shipping_cost" label="配送费用" min-width="90px"></el-table-column>
  <el-table-column prop="condition" label="商品新旧度" min-width="90px">
    <!-- 商品新旧程度：0 - 全新，1 - 九成新，2 - 八成新 -->
    <template #default="scope">
      <el-tag v-if="scope.row.condition == 0" type="success">全新</el-tag>
      <el-tag v-else-if="scope.row.condition == 1" type="success">九成新</el-tag>
      <el-tag v-else-if="scope.row.condition == 2" type="danger">八成新</el-tag>
    </template>
  </el-table-column>
  <el-table-column  label="操作" width="150px">
    <template #default="scope">
      <el-button type="primary"  size="small"  @click="updata(scope.row.id)">修改</el-button>
      <el-button type="danger"  size="small"  @click="delList(scope.row.id)">删除</el-button>
    </template>
  </el-table-column>
</el-table>


 <!-- 分页区域 -->
 <el-pagination
    background
    :page-size="size"
    :pager-count="11"
    layout="prev, pager, next"
    :total="total"
    @current-change="change"
  />

  <!-- 修改状态 -->
  <el-dialog v-model="updatashow" title="修改商品状态" width="1000" @close="updataclose">
      <el-form :model="Info">
        <el-form-item label="选择状态" label-width="140px">
            <!-- 商品状态：0 - 下架，1 - 上架 -->
          <el-select v-model="Info.order_status" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="updatashow = false">取消</el-button>
          <el-button type="primary" @click="unpadtaState" >
            修改
          </el-button>
        </div>
      </template>
    </el-dialog>

  </div>
</template> 

<script setup lang="ts">
import {ref} from 'vue'
import {getlist,updateList,deleteList,gettotal} from '../api/goods.js'
import  { ElMessage } from 'element-plus'
const list = ref([
  
])
//分页
let count = ref(1)
//条数
let size = ref(10)
let total = ref(100)
function change(value: number){
  count.value = value
  Getlist()
}
//获取总数
const totals = async()=>{
  const {data:res}= await gettotal('gettotal')
  total.value = res.total
}
totals()
//获取列表
const Getlist = async ()=>{
  const {data:res} = await getlist(`getlist/${count.value}`)
  console.log(res)
  if(res.data.code != 200) return
  if(res.data.list.length == 0) return list.value = []
  res.data.list.map((item:any)=>{
    item.state = Number(item.state) 
    item.url = JSON.parse(item.url)[0]
  })
  list.value = res.data.list
}

//删除
const delList = async (id:number)=>{
  const {data:res} = await deleteList(`delete/${id}`)
  console.log(res)
  if(res.data.code != 200) return ElMessage.error('删除失败')
  ElMessage.success('删除成功')
  Getlist()
}

//修改
const updatashow = ref(false)
const Info = ref({
  order_status: '',
  id: 0
})
const updata = (id:number)=>{
  updatashow.value = true
  Info.value.id = id
}
const updataclose = ()=>{
  Info.value.order_status = ''
  
}
const unpadtaState = async ()=>{
  const {data:res} = await updateList(`update`,Info.value)
  if(res.data.code != 200) return ElMessage.error('修改失败')
  ElMessage.success('修改成功')
  Getlist()
  updatashow.value = false
}
const options = ref([
  {
    value: '0',
    label: '下架'
  },
  {
    value: '1',
    label: '上架'
  }
])


Getlist()
</script>

<style scoped>
.nickname-cell {
  white-space: nowrap; 
  overflow: hidden;   
  text-overflow: ellipsis; 
  max-width: 150px;   
}
</style>